<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue.set()的使用</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        {{name}}
        <br>
        {{address}}
        <hr>
        <h2>学生姓名:{{students.name}}</h2>
        <h2>学生真实年龄:{{students.age.rAge}},对外年龄{{students.age.sAge}}</h2>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f,index) in students.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
        <h2 v-if="students.sex">学生性别是:{{students.sex}}</h2>
        <button @click="addsex">点击添加一个学生性别属性，默认值是男</button>
    </div>
    <script>

        /* 在data已经定义好的数据中，例如学生信息里，如果后面需要添加学生性别，如果直接在vm，或者_data里加是不可以的，因为这样添加的数据就不能实现响应式了，这和vue的监测数据的原理有关系，此时就需要用到vue.set()方法来实现 */

        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#root',
            data: {
                name: 'xiaoyao',
                address: 'shuanghe',
                students: {
                    name: 'tom',
                    age: {
                        rAge: 40,
                        sAge: 18
                    },
                    friends: [
                        { name: 'jerry', age: 35 },
                        { name: 'tony', age: 36 },
                    ]
                }
            },
            methods: {
                addsex() {
                    //以下两种写法都可以  Vue.set()   vm.$set()
                    // Vue.set(this.students, 'sex', '男');
                    this.$set(this.students, 'sex', '男');
                }
                // 但是Vue.set()方法是不可以直接给Vue实例vm添加属性的，也不可以给根数据对象data直接添加数据对象，必须是给data中配置的对象上添加
            }
        });
    </script>
</body>

</html>